<template>
  <div>
    <div class="research-box">
      <el-form :inline="true" :model="dataSouse.selectData" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="dataSouse.selectData.nickName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="dataSouse.selectData.role" class="m-2" placeholder="请选择角色" size="large">
            <el-option label="全部" :value="0" />
            <el-option v-for="item in dataSouse.rolelist" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataSouse.userlist" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="nickName" label="姓名" width="180" />
      <el-table-column prop="role" label="角色">
        <template #default="scope">
          <el-button v-for="item in scope.row.role" link type="primary" size="small"> {{ item.roleName }} </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)"> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 修改角色信息弹出框 -->
  <el-dialog v-model="dataSouse.isShow" title="编辑信息">
    <el-form :model="dataSouse.active">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="dataSouse.active.userName" autocomplete="请填写姓名" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px">
        <el-select multiple v-model="dataSouse.active.role" placeholder="请选择角色">
          <el-option v-for="item in dataSouse.rolelist" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dataSouse.isShow = false">取消</el-button>
        <el-button type="primary" @click="upUserdata"> 修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch } from '@vue/runtime-core'
import { getUserList, getRoleList } from '../../api/api'
import { userData, userList } from '../../type/user'
const dataSouse = reactive(new userData())
const getUser = async () => {
  const res = await getUserList()
  console.log('用户信息', res)
  dataSouse.userlist = res.data
}
const getRole = async () => {
  const res = await getRoleList()
  console.log('角色信息', res)
  dataSouse.rolelist = res.data
}
const edit = (record: userList) => {
  console.log(record)
  dataSouse.isShow = true
  dataSouse.active = {
    id: record.id,
    nickName: record.nickName,
    role: record.role.map((value: any) => value.role || value.roleId),
    userName: record.userName,
  }
}
const onSubmit = () => {
  let arr: userList[] = []
  if (dataSouse.selectData.nickName || dataSouse.selectData.role) {
    if (dataSouse.selectData.nickName) {
      arr = dataSouse.userlist.filter((value) => {
        return value.nickName.indexOf(dataSouse.selectData.nickName) != -1
      })
    } else if (dataSouse.selectData.role) {
      arr = (dataSouse.selectData.nickName ? arr : dataSouse.userlist).filter((value) => {
        return value.role.find((item) => item.role === dataSouse.selectData.role)
      })
    } else {
      arr = dataSouse.userlist
    }
    // dataSouse.research.count = arr.length
    dataSouse.userlist = arr
  }
}
//更改
const upUserdata = () => {
  console.log(dataSouse.active)
  let obj: any = dataSouse.userlist.find((value) => value.id === dataSouse.active.id)
  obj.nickName = dataSouse.active.nickName
  obj.role = dataSouse.rolelist.filter((value) => dataSouse.active.role.indexOf(value.roleId) !== -1)
  console.log(obj)
  dataSouse.userlist.forEach((item, index) => {
    if (item.id === obj.id) {
      item = obj
    }
    dataSouse.isShow = false
  })
}
watch([() => dataSouse.selectData.nickName, () => dataSouse.selectData.role], () => {
  if (dataSouse.selectData.nickName === '' && dataSouse.selectData.role === 0) {
    getUser()
  }
})
onMounted(() => {
  getUser()
  getRole()
})
</script>

<style lang="less" scoped></style>
